<template>
  <div>
    <van-nav-bar title="黑马头条-登录" />
    <van-form @submit="onSubmit">
      <van-field v-model="mobile"
                 name="mobile"
                 label="手机号码"
                 required
                 placeholder="手机号码"
                 :rules="[{ required: true, message: '请填写手机号码', pattern:/^1[3456789]\d{9}$/,trigger:'onChange'}]" />
      <van-field v-model="code"
                 type="password"
                 name="code"
                 label="手机密码"
                 required
                 placeholder="手机密码"
                 :rules="[{ required: true, message: '请填写密码', pattern:/^\d{6}$/ ,trigger:'onChange'}]" />
      <div style="margin: 16px;">
        <van-button round
                    block
                    type="info"
                    :disabled="isLoding"
                    :loading="isLoding"
                    loading-text="程序员拼命加载ing..."
                    native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Notify } from 'vant'
import { loginAPI } from '@/api'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      isLoding: false,
      mobile: '13888888888',
      code: '246810'
    }
  },
  methods: {
    // 映射到本地
    ...mapMutations(['setToken', 'refreshToken']),
    async onSubmit (values) {
      // 点击登录按钮后，就会禁用按钮and开始加载
      this.isLoding = true
      // values:{mobile:手机号，code：密码}
      // 统一前端参数名好接口参数名，可以直接怼进去
      const [err, res] = await loginAPI(values)
      if (err) {
        Notify({ type: 'warning', message: '手机号或者密码错误' })
      } else {
        Notify({ type: 'success', message: '登录成功' })
        // 登录成功后，需要调用方法，把token的值传到vuex中
        // 普通方式：this.refreshToken(res.data.data.refresh_token)
        // this.setToken(res.data.data.token)
        // 采用解构赋值方式：
        //   res.data.data: {
        // refresh_token:"9099bddf-06f1-43e8-9495-362f6d2faee1"
        // token: "c80d3c17-d811-404d-ba52-abeb7fd32f0a"}
        const { token, refresh_token } = res.data.data
        this.setToken(token)
        this.refreshToken(refresh_token)
        // JS跳转到Layout页面
        this.$router.push({
          path: '/layout'
        })
        console.log(res)
      }
      // 不管成功还是失败，都会让登录按钮恢复初始状态（可以登录，不加载）
      this.isLoding = false
    }
  }
}
</script>

<style lang="less" scoped>
// 自己找类名，更改样式
// .van-nav-bar {
//   background: #007bff;
//   // 继承过来的样式是0，被层叠了
//   // color: white;
// }
// 不显示的原因是：
// 因为导航组件身上有data-v-hash
// scoped会给标签和css加上data-v的属性
// /deep/ .van-nav-bar__title {
//   color: white;
// }
</style>>
